<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <div class="w-[800px] mb-[20px]">
                <div class="title">成本价配置</div>
                <el-table size="large"  :data="list">
                    <el-table-column label="身份" min-width="160" prop="level"/>
                    <el-table-column label="价格（元）" min-width="160" prop="num">
                        <template #default="{ row }">
                            <div>
                                <el-input v-model="row.num" :disabled="row.isDisable">
                                    <template #append>{{ row.is_yuan?'元':'%' }}</template>
                                </el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120" prop="num">
                        <template #default="{ row,$index }">
                            <el-button type="primary" v-perms="['workbench/setReportConfig']" link v-if="row.isDisable" @click="onEdit($index)">修改</el-button>
                            <el-button type="primary" v-perms="['workbench/setReportConfig']" link v-if="!row.isDisable" @click="onSave()">保存</el-button>
                            <el-button type="danger" v-perms="['workbench/setReportConfig']" link v-if="!row.isDisable" @click="onCancel">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="w-[800px]">
                <div class="title">查询价配置</div>
                <el-table size="large"  :data="listMax">
                    <el-table-column label="名称" min-width="160" prop="level"/>
                    <el-table-column label="价格（元）" min-width="160" prop="num">
                        <template #default="{ row }">
                            <div>
                                <el-input v-model="row.num" :disabled="row.isDisable">
                                    <template #append>{{ row.is_yuan?'元':'%' }}</template>
                                </el-input>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" min-width="120" prop="num">
                        <template #default="{ row,$index }">
                            <el-button type="primary" v-perms="['workbench/setReportConfig']" link v-if="row.isDisable" @click="onEdit(3)">修改</el-button>
                            <el-button type="primary" v-perms="['workbench/setReportConfig']" link v-if="!row.isDisable" @click="onSave()">保存</el-button>
                            <el-button type="danger" v-perms="['workbench/setReportConfig']" link v-if="!row.isDisable" @click="onCancel">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="rights">
import {getReportConfig,setReportConfig} from '@/api/qiye'
import feedback from '@/utils/feedback'
const info:any = ref({})
const getInfo = async () => {
    const res = await getReportConfig({});
    console.log(res)
    info.value = res.info;
    list.value = [
        {
            level: '普通渠道/用户/服务商',
            num: res.normal_user_cost,
            is_yuan: true,
            isDisable: true
        },
        {
            level: '银牌代理人',
            num: res.silver_agent_cost,
            is_yuan: true,
            isDisable: true
        },
        {
            level: '金牌代理人',
            num: res.gold_agent_cost,
            is_yuan: true,
            isDisable: true
        },
    ]
    listMax.value = [
        {
            level: '查询价最大值',
            num: res.max_query_price,
            is_yuan: true,
            isDisable: true
        },
    ]
}
getInfo()
const list:any = ref([])
const listMax:any = ref([])
const index_num:any = ref(null)
const onEdit = (index:number) => {
    console.log(index)
    if (index_num.value != null) {
        return false;
    }
    index_num.value = index;
    if (index == 3) {
        listMax.value[0].isDisable = false;
    } else {
        list.value[index].isDisable = false;
    }
    
}
const onSave = async () => {
    let params = {
        normal_user_cost: list.value[0].num,
        silver_agent_cost: list.value[1].num,
        gold_agent_cost: list.value[2].num,
        max_query_price: listMax.value[0].num,
    }
    let reg = /^(10000(\.00)?|(0\.\d{1,2}|[1-9]\d{0,3})(\.\d{1,2})?)$/;
    if (!reg.test(Number(list.value[0].num) as any)) {
        feedback.msgError('价格最大为10000，最多两位小数')
        return false;
    }
    if (!reg.test(Number(list.value[1].num) as any)) {
        feedback.msgError('价格最大为10000，最多两位小数')
        return false;
    }
    if (!reg.test(Number(list.value[2].num) as any)) {
        feedback.msgError('价格最大为10000，最多两位小数')
        return false;
    }
    if (!reg.test(Number(listMax.value[0].num) as any)) {
        feedback.msgError('价格最大为10000，最多两位小数')
        return false;
    }
    console.log(params)
    await setReportConfig(params)
    // feedback.msgSuccess('保存成功')
    if (index_num.value == 3) {
        listMax.value[0].isDisable = true;
    } else {
        list.value[index_num.value].isDisable = true;
    }
    index_num.value = null;
}
const onCancel = () => {
    if (index_num.value == 3) {
        listMax.value[0].isDisable = true;
    } else {
        list.value[index_num.value].isDisable = true;
    }
    index_num.value = null;
    getInfo()
}
</script>
<style scoped lang="scss">
.title{
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
}
</style>